import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, Tree, Select } from 'antd'

import TownsUserTable from './components/townsUserTable'
import AreaSelect from './components/areaSelect'
import { addConfig } from 'actions/config'
import Ajax from 'lib/Ajax'
const FormItem = Form.Item;
const Option = Select.Option;

class ModuleName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      search: {},
      select: {},
      roleList: []
    }
  }

  componentDidMount(){
    this.loadRole()
  }

  loadRole = ()=>{
    var self = this;
    Ajax({
      url: '/role/list',
      data: {},
      success: function(data){
        self.setState({
          roleList: data
        });
      },
      error: function(error){
        message.error(error);
      }
    });
  }

  handleFilter = (option)=>{
    if(!_.isEqual(option, this.state.search)){
      this.setState({
        search: option
      });
    }
  }

  handleSelect = (option)=>{
    this.setState({
      select: option
    });
  }

  render() {
    return (
      <div className="area">
        <FilterModule 
          handleFilter={ this.handleFilter }
        />
        <div className="area-con">
          <Row>
            <Col span={4}>
              <AreaSelect
                handleSelect={ this.handleSelect }
              />
            </Col>
            <Col span={20}>
              <TownsUserTable 
                search={ this.state.search }
                select={ this.state.select }
                roleList={ this.state.roleList }
              />
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(ModuleName)

class Filter extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount(){
    
  }

  handleSearch = (e) => {
    var self = this;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      self.props.handleFilter(values);
    });
  }

  handleReset = () => {
    this.props.form.resetFields();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    return (<Form
          horizontal
          className="ant-advanced-search-form"
          onSubmit={this.handleSearch}
        >
          <Row gutter={10}>
            <Col span={5}>
              <FormItem {...formItemLayout} label="用户ID">
                {getFieldDecorator("userId")(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem {...formItemLayout} label="用户登录账号">
                {getFieldDecorator("userAccount")(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem {...formItemLayout} label="用户名称">
                {getFieldDecorator("userName")(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem {...formItemLayout} label="用户状态">
                {getFieldDecorator("disabled", {
                  initialValue: "2"
                })(
                  <Select
                    size="default"
                  >
                    <Option value="2">全部</Option>
                    <Option value="0">正常</Option>
                    <Option value="1">注销</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={4}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                重置
              </Button>
            </Col>
          </Row>
        </Form>);
  }
}

var FilterModule = Form.create()(Filter)
